<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="js/storage.js"></script>
		<script src="js/url.js"></script>
		<script type="text/javascript" src="js/util.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

		<!-- 百度地图 -->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PViQsMdlvUvxzpzShjmzW6qaAU2PexdH"></script>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
		</style>

		<script type="text/javascript" charset="UTF-8">
			mui.init();
			mui.plusReady(function() {

				//获得参数 hid
				var cpage = plus.webview.currentWebview();
				var hid = cpage.hid;
				//console.log("---"+hid);
				//				console.log(""+cpage);
				//
				var beginTime = cpage.beginTime;
				var endTime = cpage.endTime;
				//console.log("开始时间："+beginTime+",结束时间："+endTime);
				document.getElementById("beginTime").innerHTML = beginTime;
				document.getElementById("endTime").innerHTML = endTime;

				//通过ajax请求酒店的详细信息
				myajax({
					url: url.getHotelInfo,
					data: {
						hid: hid
					},
					success: function(data) {
						//获得酒店数据
						var hotelName = data.hotelName;
						var openTime = data.openTime;
						var imagePath = data.hotelImage;
						var keyword = data.keyword;
						var hotelInfo = data.hotelInfo;
						var cityName = data.city.cityName;
						var district = data.district;
						var address = data.address;
						var lat = data.lat;
						var lon = data.lon;
						document.getElementById("hotelName").innerHTML = hotelName;
						document.getElementById("hotelImage").src = url.getImage + "?path=" + imagePath;
						document.getElementById("hotelName2").innerHTML = hotelName;
						document.getElementById("openTime").innerHTML = openTime + "开业";
						document.getElementById("keyword").innerHTML = keyword;
						document.getElementById("hotelInfo").innerHTML = hotelInfo;
						document.getElementById("cityName").innerText = cityName;
						document.getElementById("district").innerText = district;
						document.getElementById("address").innerText = address;
						initMap(lat, lon);

						//处理房型列表
						var rooms = data.rooms;

						//循环房型
						var roomHtml = "";
						for (var i = 0; i < rooms.length; i++) {
							//计算房型的平均价 - beginTime - endTime
							var allPrice = 0;
							var days = 0;
							var prices = rooms[i].prices;
							//console.log(prices);
							for (var j = 0; j < prices.length; j++) {
								//当天的时间
								var priceDate = prices[j].date;
								//当天的价格
								var price = prices[j].price;

								if (new Date(priceDate) >= new Date(beginTime) && new Date(priceDate) < new Date(endTime)) {
									allPrice += price;
									days++;
								}
							}
							//							console.log(rooms[i].title);

							//计算平均价
							var avgPrice = parseInt(allPrice / days);

							roomHtml += '<li class="mui-table-view-cell mui-media">';
							roomHtml += '<a href="javascript:;">';
							roomHtml +=
								'<img class="mui-media-object mui-pull-left" src="' + url.getImage + "?path=" + rooms[i].image +
								'" style="min-width: 100px; height: 100px;">';
							roomHtml += '<div class="mui-media-body">';
							roomHtml += rooms[i].title;
							roomHtml += '<p class="mui-ellipsis">' + rooms[i].info + '</p>';
							roomHtml += '<p class="mui-ellipsis">' + rooms[i].area + 'm<sup>2</sup></p>';
							roomHtml += '<p class="mui-ellipsis" style="font-size: 25px; color: red; margin-top: 7px;">￥' + avgPrice +
								'</p>';
							roomHtml += '</div>';
							roomHtml += '<button class="mui-btn" rid="' + rooms[i].id + '" rtitle="' + rooms[i].title + '">预订</button>';
							roomHtml += '</a>';
							roomHtml += '</li>';
							//console.log(rooms[i].title);

						}

						document.getElementById("roomsList").innerHTML = roomHtml;

					}
				});


				//初始化设置预订按钮的点击事件
				mui(".mui-table-view").on('tap', ".mui-btn", function() {

					//获得酒店id
					var hotelId = hid;
					//获得酒店标题
					var hotelTile = document.getElementById("hotelName").innerHTML;
					//入住时间 离店时间
					var sbeginTime = beginTime;
					var sendTime = endTime;

					//房型id
					var rid = this.getAttribute("rid");
					//房型标题
					var rtitle = this.getAttribute("rtitle");

					//跳转到订单编辑页面
					mui.openWindow({
						url: "order_edit.html",
						id: "order_edit.html",
						extras: {
							hid: hotelId,
							htitle: hotelTile,
							beginTime: sbeginTime,
							endTime: sendTime,
							rid: rid,
							rtitle,
							rtitle
						}
					});


				});

			});


			//初始化地图
			function initMap(lat, lon) {

				var map = new BMap.Map("container");
				var point = new BMap.Point(lon, lat);
				map.centerAndZoom(point, 14);

				//设置标注物
				var marker = new BMap.Marker(point); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			}
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: white;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: black;"></a>
			<h1 id="hotelName" class="mui-title" style="color: black;">酒店名称</h1>
		</header>

		<img id="hotelImage" style="width: 100%;" src="images/a1.jpg" />

		<!-- 酒店详细内容 -->
		<div>
			<!-- 一行 -->
			<div class="mui-row">
				<div class="mui-col-sm-12" style="padding: 20px;">
					<span style="font-size: 20px;"><b id="hotelName2">酒店名称</b></span>
				</div>
				<div class="mui-row">
					<div class="mui-col-sm-5" style=" padding: 10px;" id="openTime">
						xxxx年xx月xx日开业
					</div>
					<div class="mui-col-sm-7" style=" padding: 10px;" id="keyword">
						关键词
					</div>
				</div>
				<div class="mui-row">
					<div class="mui-col-sm-12" style="padding: 10px;">
						<span id="hotelInfo">酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述
							信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息酒店的描述信息</span>
					</div>
				</div>
				<div class="mui-row">
					<div class="mui-col-sm-2" style=" padding: 10px;">
						<span style="font-weight: 900;" id="cityName">深圳市</span>
					</div>
					<div class="mui-col-sm-2" style=" padding: 10px;">
						<span style="font-weight: 900;" id="district">宝安区</span>
					</div>
					<div class="mui-col-sm-8" style="padding: 10px;">
						<span style="font-weight: 900;" id="address">xxx街道xxx路xxx号</span>
					</div>
				</div>
				<div class="mui-row">
					<div class="mui-col-sm-12" style=" padding: 10px; height: 300px;">
						<!-- 百度地图的容器 -->
						<div id="container"></div>
					</div>
				</div>
				<div class="mui-row">
					<div class="mui-col-sm-12" style="padding: 10px; font-weight: 900;">
						选择房间 (<span id="beginTime"></span> 到 <span id="endTime"></span>)
					</div>
				</div>
				<!-- 房型列表 -->
				<ul id="roomsList" class="mui-table-view">
					<!-- <li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/2.jpg" style="min-width: 100px; height: 100px;">
							<div class="mui-media-body">
								房型标题
								<p class="mui-ellipsis">房型信息</p>
								<p class="mui-ellipsis">xxm<sup>2</sup></p>
								<p class="mui-ellipsis" style="font-size: 30px; color: red; margin-top: 4px;">￥xxx</p>
							</div>

							<button class="mui-btn">预订</button>
						</a>
					</li> -->
				</ul>

			</div>
		</div>
	</body>
</html>
